<template>
  <view class="img-box">
    <view v-for="item in imgs" class="img-item" @click="openPopup(item)">
      <!-- @click="openPopup(item)" -->
      <img
        :src="formatSrc(item.fileUrl)"
        alt=""
        style="width: 10vw; height: 10vw; margin-right: 20upx"
      />
    </view>
  </view>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff" @change="changePopup">
    <img
      :src="formatSrc(showImgUrl)"
      alt=""
      style="width: 80vw; max-height: 80vh"
    />
    <button type="primary" @click="onDownLoad" style="display: block">
      下载
    </button>
  </uni-popup>
</template>

<script setup>
import { defineProps, ref, nextTick } from "vue";
import { BASE_FILE_URL } from "@/utils/requset.js";
import { formatSrc } from "@/utils/index.js";
const props = defineProps({
  imgs: {
    type: Array || String,
  },
});
const popup = ref();
const showImgUrl = ref("");
const isOpen = ref(false);
const openPopup = async (item) => {
  showImgUrl.value = item.fileUrl;
  if (isOpen.value) {
    popup.value.close();
  } else {
    popup.value.open("center");
  }
  isOpen.value = !isOpen.value;
};
const changePopup = (e) => {
  isOpen.value = e.show;
};
function onDownLoad(item) {
  let url = formatSrc(showImgUrl.value);
  let filename = "隐患图片.png";
  uni.showLoading({
    title: "正在下载",
  });

  let dtask = plus.downloader.createDownload(
    url,
    {
      filename: filename, //利用保存路径，实现下载文件的重命名
    },
    (d, status) => {
      //d为下载的文件对象
      if (status == 200) {
        let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);

        uni.hideLoading();
        uni.showToast({
          icon: "none",
          mask: true,
          title: "已保存到" + fileSaveUrl, //保存路径
          duration: 3000,
        });
        //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
        // plus.runtime.openFile(d.filename); //选择软件打开文件
      } else {
        //下载失败
        uni.hideLoading();
        plus.downloader.clear(); //清除下载任务
        uni.showToast({
          icon: "none",
          mask: true,
          title: "下载失败，请稍后重试",
        });
      }
    }
  );
  dtask.start();
}
</script>

<style lang="scss" scoped>
.img-box {
  width: 100vw;
  height: 12vw;
  display: flex;
}
</style>
